/* 排水管信息 弹框
* @ 劳兆城 
* @ 2017-08-12*/

<template>
	<interact-model 
		ref="interact-model"
		title="排水管信息"
		class="drainPipe-model">
		<div class="drainPipe-warpper">
			<div class="drainPipe-table">
				<table border class="table">
					<tbody>
						<tr>
							<td>管线编码</td>
							<td>{{fliterData('pipe_line_no')}}</td>
							<td>管线名称</td>
							<td>{{fliterData('pipe_line_name')}}</td>
						</tr>
						<tr>
							<td>管线类型</td>
							<td>{{fliterData('pipe_line_type')}}</td>
							<td>图形编号</td>
							<td>{{fliterData('picture_no')}}</td>
						</tr>
						<tr>
							<td>管线长度</td>
							<td>{{fliterData('length')}}</td>
							<td>口径</td>
							<td>{{fliterData('diameter')}}</td>
						</tr>
						<tr>
							<td>材质</td>
							<td>{{fliterData('material_quality')}}</td>
							<td>设施类别</td>
							<td>{{fliterData('category')}}</td>
						</tr>
						<tr>
							<td>所属路段</td>
							<td>{{fliterData('road')}}</td>
							<td>片区</td>
							<td>{{fliterData('district')}}</td>
						</tr>
						<tr>
							<td>街镇</td>
							<td>{{fliterData('town')}}</td>
							<td>业主单位</td>
							<td>{{fliterData('company')}}</td>
						</tr>
						<tr>
							<td>资产编号</td>
							<td>{{fliterData('asset_no')}}</td>
							<td>运行养护单位</td>
							<td>{{fliterData('mainienance')}}</td>
						</tr>
						<tr>
							<td>联系人</td>
							<td>{{fliterData('contacts')}}</td>
							<td>电话</td>
							<td>{{fliterData('phone_no')}}</td>
						</tr>
						<tr>
							<td>说明标签</td>
							<td>{{fliterData('remake')}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<loading v-show="showLoading"></loading>	
	</interact-model>
</template>

<script>
	import {
		loadingMixin,
		interactModelMixin,
		aPictureModelMixin
	} from 'common/js/mixins'

export default {
		mixins: [
			loadingMixin,
			interactModelMixin,
			aPictureModelMixin
		],
		data () {
			return {
				showLoading: false
			}
		},
		methods: {
			show (feature) {
				this.$refs['interact-model'].showModel()
			this.showLoading = true
			setTimeout(() => {
					this.data = feature.getProperties() || {}
				this.showLoading = false
			}, 200)
			}
		}
	}
</script>

<style lang="scss">
	.drainPipe-model {
		width: 600px;
		height: 450px;
		.drainPipe-warpper {
			width: 100%;
			height: 100%;
			position: relative;
			padding: 5px;
			.drainPipe-table {
				width: 100%;
				height: 100%;
				.table {
					width: 100%;
					font-size: 14px;
					border: 1px solid #ddd;
					td {
						width: 25%;
						padding: 5px;
					}
				}
			}
		}
	}
</style>